<template>
  <div class="container loginVue">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="120"
      shapeType="star"
      :particleSize="5"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="cash"
    >
    </vue-particles>
    <div class="login">
      <div class="tittle">智能化程序设计管理系统</div>
      <div class="form">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item prop="schoolId" v-show="show">
            <el-select
              v-model="form.schoolId"
              filterable
              placeholder="请选择学校"
            >
              <span slot="prefix" class="el-icon  el-icon-school"></span>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.schoolName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="username">
            <el-input placeholder="请输入您的学号/工号" v-model="form.username">
              <span slot="prefix" class="el-icon el-icon-user"></span>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入您的密码  "
              v-model="form.password"
              @keyup.enter.native="submit"
              show-password
            >
              <span slot="prefix" class="el-icon el-icon-lock"></span
            ></el-input>
          </el-form-item>
          <div class="forget">忘记密码</div>
          <el-form-item prop="submit">
            <el-button class="submit" type="primary" @click="submit()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="loginFooter">
        <span class="loginFooterTitle">使用第三方账号登陆</span>
        <div class="footIcon">
          <svg class="icon" aria-hidden="true" @click="otherLogin(0)" >
          <use xlink:href="#hhtx-QQ"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="otherLogin(1)">
          <use xlink:href="#hhtx-weixin"></use>
        </svg>
        </div>
        
      </div>
    </div>
    <div class="footer">
      <p>粤ICP备2022047280号</p>
      <span>SCAU传智工作室&nbsp;</span>
      <span>Copyright © 2021</span>
      <span>&nbsp;All rights reserved</span>
      
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VueParticles from "vue-particles";
import { login, schools } from "@/api/login";
Vue.use(VueParticles);
export default {
  data() {
    return {
      login: false,
      form: {
        username: "",
        schoolId: "",
        password: ""
      },
      options: [],
      rules: {
        schoolId: [
          { required: false, message: "请选择学校", trigger: "change" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
     schoolEnglish:window.document.location.host,
     schooll:null,
     show:true,
    };
  },
  created() {
    this.schoolEnglish=this.schoolEnglish.substring(0,this.schoolEnglish.indexOf("."));
    console.log(this.schoolEnglish);
    this.login = false;
    let obj = {
      pageNum: 1,
      pageSize: 100
    };
    schools(obj).then(res => {
      this.options = res.data;
      console.log(this.options);
      try {
        res.data.forEach(item => {
          let school = item;
          if(school.schoolEnglishName == this.schoolEnglish) {
            this.school = school;
            this.form.schoolId = school.id;
            this.show = false;
            throw Error();
          }else {
            this.school = null;
            this.show = true;
          }
        })
      } catch(err) {
        console.log(err);
      }

    });
    
  },
  beforeRouteLeave(to, from, next) {
    // just use `this`
    if (!this.login) {
      this.$message("请先登录");
      next(false);
    } else {
      next();
    }
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.login = true;
          //delete this.form.schoolId;
          //当登录接口不可用时
          /* this.$store.commit("setRole", "superAdmin"); //"student","teacher","schoolAdmin","superAdmin"
            this.$router.push({ path: "/main" });   */

          login(this.form).then(
            res => {
              try {
                localStorage.setItem("user", JSON.stringify(res.data)); //保存用户信息
              } catch (err) {
                this.$message.error(err);
              }
              this.$store.commit("setRole", res.data.roleName); //"student","teacher","schoolAdmin","superAdmin"
              this.$message.success("登录成功！");
              this.$router.push({ path: "/main" });
            },
            err => {
              if (err.status == 500)
                this.$message.error("用户不存在or密码错误");
            }
          );
        }
      });
    },
    //使用第三方登录，index为0代表QQ登录  index为1代表微信登录
    /*otherLogin(index){
      
    }*/
  }
};
</script>

<style scoped>
.container {
  height: 100%;
  background: url("~@/assets/img/backgroud.jpg") center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
  position: relative;
  overflow: auto;

}
.login {
  width: 400px;
  height: 400px;
  background-color: #f4f4f5;
  opacity: 0.9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form {
  width: 90%;
  margin: 0 auto;
}
.el-icon {
  color: #3b77e3;
  font-size: 22px;
  vertical-align: middle;
}
.loginFooter {
  height: 70px;
  text-align: left;
  padding-top: 10px;
  background-color: white;
  
}
.loginFooterTitle {

  margin-left: 30px;
  font-size:14px;
  font-weight: 700px;
  color: rgb(192, 189, 189);
}
.footIcon{
  font-size: 35px;
  text-align: center;
}
.icon{
    margin-right: 5px;
    margin-top: 10px;
    cursor: pointer;
}
.el-input {
  width: 100%;
}
.el-select {
 width: 100%;
}
.footer {
  color: white;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  line-height: 20px;
  font-size: 12px;
  font-weight: 600;
}
.submit {
  width: 90%;
  height: 35px;
  vertical-align: middle;
  margin-top: 2px;
}
.tittle {
  font-size: 25px;
  color: #3b77e3;
  margin: 15px 20px 15px 20px;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 2px solid #3b77e3;
}
.forget {
  font-size: 13px;
  color: #169bd5;
  margin-top: -18px;
  margin-left: 300px;
  cursor: pointer;
}
.forget:hover {
  text-decoration: underline;
}
.cash {
  position: fixed;
  top: 0px;
  bottom: 100px;
  width: 100%;
}

</style>
